$(function () {

    // 定义获取数据的全局变量
    var cateData;
    var LeftScroll;
    init()

    function init() {
        renderCategory()
        eventList()
    }


    // 实现缓存,在发送请求前先看看本地有没有数据，有则不必发送请求，否则发送请求
    // 设置一定的时间，如果超过了某段时间，则视为过期，需要重新发送请求
    function renderCategory() {
        // 设置一个键为cates，如果有这个键，则说明有数据
        if (localStorage.getItem('cates')) {
            // 先取出之前存入的字符串类型的数据
            var strData = localStorage.getItem('cates')
            // 将它转换成对象或数组
            var localData = JSON.parse(strData)
            // 判断是否过期，如果过期了则需要重新请求数据           
            if (Date.now() - localData.time > 600000 * 1000) {
                // 过期了，重新请求数据,单位是毫秒
                getCategories()
            } else {
                // 没有过期,获取存在本地的数据，渲染页面
                // $('body').removeClass('loadding')
                cateData = localData.data
                renderLeft()
                renderRight(0);
            }
        } else {
            // 没有数据，发送请求
            getCategories()
        }
    }

    // 获取左侧分类的数据
    function getCategories() {
        $.get('categories', function (result) {
            if (result.meta.status == 200) {
                cateData = result.data
                // 将获得的数据存储到json格式的对象中
                // 扩展了本地存储的对象
                var obj = {
                    data: cateData,
                    // 获取当前的时间戳，用来在判断本地存储是否过期
                    time: Date.now()
                }
                // 将json格式的对象转换成字符串
                var jsonData = JSON.stringify(obj);
                // 将字符串存的数据存放到本地存储中
                localStorage.setItem('cates', jsonData);
                renderLeft();
                renderRight(0);
            }
        })
    }

    // 左侧菜单的点击事件
    function eventList() {
        // 因为数据时动态生成的，所以要用到事件委托
        $('.content_left').on('tap', 'li', function () {
            $(this).addClass('active').siblings().removeClass('active');
            // 获取被点击的li的索引
            var index = $(this).index()
            // console.log(index)
            // 渲染右侧
            renderRight(index)
            // 点击菜单，往上置顶
            LeftScroll.scrollToElement(this);
        })
    }

    // 根据左侧被选中的索引来渲染右侧的内容
    function renderRight(index) {
        //获取右侧菜单的数据以及渲染
        var children = cateData[index].children
        var right_html = template('rightTemp', {
            data: children
        })
        // console.log(right_html)
        $('.content_right').html(right_html)

        //  获取要加载的图片的长度
        var times = $('.content_right img').length
        // console.log(times)
        // 等待图片加载完，才可以滚动
        $('.content_right img').on('load', function () {
            times--;
            if (times == 0) {
                var rightScroll = new IScroll('.content_right')
            }
        })
    }

    // 渲染左侧的页面
    function renderLeft() {
        var left_html = template('cateTemp', {
            data: cateData
        });
        $('.content_left').html(left_html);
        // 初始化左侧滚动条
        LeftScroll = new IScroll('.content_left');
    }

    setFont()
    // 设置字体的大小
    function setFont() {
        // 公式：
        // 要计算的fontsize的大小=基础值 * 要适配的屏幕的宽度/设计稿的宽度
        // 设置基础值
        var baseVal = 100;
        // 设计稿的宽度
        var pageWidth = 640;
        // 要适配的屏幕的宽度=当前屏幕的宽度
        var screenWidth = document.querySelector("html").offsetWidth;
        console.log(screenWidth)
        // 要设置的字体的大小
        var fz = baseVal * screenWidth / pageWidth;
        console.log(fz)
        // 将字体的大小设置到html中的标签中
        document.querySelector("html").style.fontSize = fz + "px";

    }

    // 屏幕的宽度改变事件
    window.onresize=function(){
        setFont()
    }
})